<template>
    <el-dialog
        :visible.sync="dialogVisible"
        title="座位管理"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="800px"
    >
        <el-table
            v-loading="loading"
            style="width: 100%"
            :data="arrangeSectionSeatList"
            border
            stripe
        >
            <el-table-column prop="seatName" label="座位名称"/>
            <el-table-column prop="seatPrice" label="价格"/>
            <el-table-column prop="status" label="售座类型">
                <template #default="scope">
                    <el-tag :type="scope.row.saleTicketTypeStyle">
                        {{ scope.row.saleTicketTypeName }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="scope">
                    <el-tag :type="scope.row.statusStyle">
                        {{ scope.row.statusName }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-popconfirm
                        v-if="scope.row.status == 1"
                        title="确定占座吗？"
                        @onConfirm="lockSeat(scope.row.seatCode)"
                    >
                        <el-button slot="reference" size="mini">占座</el-button>
                    </el-popconfirm>
                    <el-popconfirm
                        v-else-if="scope.row.status == 3"
                        title="确定取消占座吗？"
                        @onConfirm="unLockSeat(scope.row.seatCode)"
                    >
                        <el-button slot="reference" size="mini">取消占座</el-button>
                    </el-popconfirm>
                </template>

            </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>
import {ArrangeSectionSeatApi} from '@/api/intercity/ArrangeSectionSeatApi'

export default {
    name: 'ArrangeSectionSeat',
    components: {},
    data() {
        return {
            arrangeSectionSeatList:[],
            arrangeSectionCode: '',
            arrangeCode: '',
            loading: false,
            dialogVisible: false
        }
    },

    methods: {
        // 获取用户列表
        getList() {
            this.loading = true
            ArrangeSectionSeatApi.getList(this.arrangeSectionCode).then((response) => {
                response.forEach(function(item){
                    item.seatPrice = item.seatPrice/100
                })
                this.arrangeSectionSeatList = response
                this.loading = false
            }).catch((err) => {
                this.loading = false
            })
        },

        // 显示组件
        show(data) {
            this.dialogVisible = true
            this.arrangeSectionCode = data.arrangeSectionCode
            this.arrangeCode = data.arrangeCode
            this.getList()
        },

        // 锁定座位
        lockSeat(seatCode) {
            ArrangeSectionSeatApi.lockSeat({seatCode:seatCode}).then((response) => {
                this.getList()
                this.$emit('refresh',this.arrangeCode)
            })
        },

        // 解锁座位
        unLockSeat(seatCode) {
            ArrangeSectionSeatApi.unLockSeat({seatCode:seatCode}).then((response) => {
                this.getList()
                this.$emit('refresh',this.arrangeCode)
            })
        }
    }
}
</script>
